<template>
  <div class="box">
    <div class="right">
      <div class="title">系统链接</div>
      <div>
        <el-row>
          <el-col :span="6" v-for="item in imgList" :key="item.id"
            ><div class="grid-content bg-purple">
              <img :src="item.url" /></div
          ></el-col>
        </el-row>
      </div>
    </div>
    <!-- 各分县局统计 -->
    <div class="center">
      <div class="title">各分县局统计</div>
      <div class="table">
        <el-table
          stripe
          :data="countylist"
          style="width: 100%"
          border
          :header-cell-style="{ background: '#ebeef5' }"
          size="small"
        >
          <el-table-column prop="deptName" label="各分县局" width="200">
            <template slot-scope="{ row }">
              <div>
                {{ row.deptName | filterName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="monthNumbers" label="本月用稿">
          </el-table-column>
          <el-table-column prop="yearNumbers" label="本年用稿">
          </el-table-column>
        </el-table>
      </div>
      <div class="button" @click="toTable(1)">查看更多</div>
    </div>
    <!-- 支队统计 -->
    <div class="left">
      <div class="title">支队统计</div>
      <div class="table">
        <el-table
          stripe
          :data="detachmentList"
          style="width: 100%"
          border
          :header-cell-style="{ background: '#ebeef5' }"
          size="small"
        >
          <el-table-column prop="deptName" label="各分县局" width="200">
          </el-table-column>
          <el-table-column prop="monthNumbers" label="本月用稿">
          </el-table-column>
          <el-table-column prop="yearNumbers" label="本年用稿">
          </el-table-column>
        </el-table>
      </div>
      <div class="button" @click="toTable(2)">查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bottom",
  data() {
    return {
      imgList: [
        { url: require("../../../assets/images/a1.fb757483.png"), id: "1" },
        { url: require("../../../assets/images/a2.da0d9aba.png"), id: "2" },
        { url: require("../../../assets/images/a3.de21024c.png"), id: "3" },
        { url: require("../../../assets/images/a4.888a59d1.png"), id: "4" },
        { url: require("../../../assets/images/a5.8ac9a2ee.png"), id: "5" },
        { url: require("../../../assets/images/a6.cc7d92a2.png"), id: "6" },
        { url: require("../../../assets/images/a7.9fe9e0e6.png"), id: "7" },
        { url: require("../../../assets/images/a8.9489e687.png"), id: "8" },
        { url: require("../../../assets/images/a9.23f106ee.png"), id: "9" },
        { url: require("../../../assets/images/12.2baecf16.png"), id: "10" },
        { url: require("../../../assets/images/13.abc11dc8.png"), id: "11" },
        { url: require("../../../assets/images/14.4196e3a7.png"), id: "12" },
      ],
      // 各分县局统计列表
      countylist: [],
      // 支队统计列表
      detachmentList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 查看更多按钮
    toTable(num) {
      this.$router.push({
        path: "/homePage/table",
        query: {
          num: num,
        },
      });
    },
    // 获取表格数据
    async getList() {
      let result = await this.$API.receptionist.reqGetFirst();
      console.log(result.data);
      if (result.status === 200) {
        let countyArr = result.data.filter((item) => {
          if (item.parentId === 2) {
            return item;
          }
        });
        this.countylist = countyArr.slice(0, 5);
        let detachmentArr = result.data.filter((item) => {
          if (item.parentId === 3) {
            return item;
          }
        });
        this.detachmentList = detachmentArr.slice(0, 5);
      }
    },
  },
  filters: {
    filterName(val) {
      return val.slice(0, 2);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.26rem;
  color: #43a7de;
}
.box {
  margin-top: 0.4rem;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  .right {
    width: 35%;
    height: 4.5rem;
    // background-color: red;
    img {
      width: 1.5rem;
    }
  }
  .center {
    width: 25%;
    height: 4.5rem;
    // background-color: skyblue;
    .button {
      cursor: pointer;
      width: 100%;
      height: 0.68rem;
      background-color: #dedede;
      font-size: 0.2rem;
      color: #77626f;
      text-align: center;
      line-height: 0.68rem;
    }
  }
  .left {
    width: 25%;
    height: 4.5rem;
    // background-color: green;
    .button {
      cursor: pointer;
      width: 100%;
      height: 0.68rem;
      background-color: #dedede;
      font-size: 0.2rem;
      color: #77626f;
      text-align: center;
      line-height: 0.68rem;
    }
  }
}
</style>
